<template>
	<view class=""  >


		<view  v-show="addressNull"  class="" v-cloak>
			<view  class="cart_null">
				<image src="../../static/images/address/address_null.png" mode=""></image>
				<text>暂时还没有收货地址~</text>
				<button class="btn-shop-list" @tap="addAddress()">去添加</button>
			</view>
		</view>

		<view class="" v-show="!addressNull" v-cloak >
			<scroll-view scroll-y :style="{height: addressHeight+'px'}" class="scroll">
				<view class="box-c address-info" v-for="(address,index) in addressList">
					<view class="box d-jc-sb list-1 ">
						<text>{{address.name}}</text>
						<text>{{address.phone}}</text>
					</view>
					<view class="box list-2">
						<text>{{address.province}} {{address.city}} {{address.district}} {{address.address}}</text>
					</view>

					<view class="line">
					</view>
					<view class="box d-jc-sb default-address">
						<view class="list-3" @tap="setDefault(address,index)">
							<text class="iconfont icondagou " :class="address.isDefault ==1 ? 'check-active' : '' ">
							</text>
							<text>
								设置默认地址
							</text>
						</view>
						<view class="list-4 box d-ac-c">
							<text class="" @tap="getAddressInfo(address.id)">
								修改
							</text>
							<text @tap='delAddress(address.id)'>
								删除
							</text>
						</view>

					</view>

				</view>


			</scroll-view>
		</view>
	</view>


</template>

<script>
	export default {

		data() {
			return {
				
				addressList: [],
				buttonList: [{
					text: '删除',
					style: {
						backgroundColor: '#FF5551'
					}
				}],
				addressHeight: 0,
				addressNull:false
				


			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.addressHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个


				}
			})
		},

		//监听状态栏按钮事件
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.navigateTo({
					url: './address-add'
				});
			}
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			getAddressInfo(id){
				uni.navigateTo({
					url: 'address-add?id='+id
				});
			},
			/* 	uni.navigateTo({
								url: '../order/order?payState=1',
								success: res => {},
								fail: () => {},
								complete: () => {}
							}); */
			addAddress(){
				uni.navigateTo({
					url: './address-add'
				});
			},
			setDefault(address, index) {
				let parameter = {
					id: address.id,
					isDefault: address.isDefault == 1 ? -1 : 1
				}
				this.$api.setDefault(parameter).then((res) => {
					if (res.data.code == 200) {
						for (var i = 0; i < this.addressList.length; i++) {
							this.addressList[i].isDefault = -1
						}
						this.addressList[index].isDefault = address.isDefault == 1 ? -1 : 1
					
					}
				})

			},
			delAddress(id) {
				let _this = this
				this.$api.delAddress({
					id: id
				}).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: "已删除",
							duration: 1000,
						});
					}
					setTimeout(function() {
						_this.getAddressList()
					}, 1000);
				})
			},
			getAddressList() {
				let _this = this
				this.$api.getAddressList({}).then((res) => {
					if (res.data.code == 200) {
						_this.addressList = res.data.data
						_this.addressNull = _this.addressList=='' ? true:false
					}
				})
			},
			edit(id) {
				uni.navigateTo({
					url: './address-add?id=' + id
				});


			},
			swipeChange() {
				// alert(11)

			},
			swipeClick() {
				alert(22)

			}


		}
	}
</script>

<style>
	.cart_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	.btn-shop-list{
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
	.cart_null text {
		margin: 0 auto;
		color: #666666;
	}
	
	.cart_null image {
		margin: 60rpx auto;
		width: 250rpx;
		height: 250rpx;
	}
	.default-address {
		padding: 14rpx 0;
	}

	.list-1 {
		font-size: 32rpx;
		padding-top: 10rpx 0;
	}

	.list-2 {
		font-size: 26rpx;
		color: #999999;
		padding: 14rpx 0;

	}

	.list-3 {
		color: #888888;
		font-size: 28rpx;
	}

	.list-3 text:last-child {
		margin-left: 15rpx;
		line-height: -10rpx;
	}

	.address-info {
		padding: 10rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 18rpx;
	}

	.list-4 text {
		border-radius: 50rpx;
		padding: 5rpx 35rpx;
		border: 1rpx solid #EEEEEE;
		color: #888888;
		margin: 0 12rpx;

	}

	.icondagou {
		/* color: #FF5551; */
		color: #c1c1c1;
		font-size: 36rpx;
	}

	.check-active {
		color: #FF5551;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #eaeaea;
		border-radius: 20rpx;
	}

	.scroll {
		background-color: #F8F8F8;
	}
</style>
